<template>
    <el-select
        v-model="selectName"
        filterable
        remote
        v-bind="$attrs"
        clearable
        reserve-keyword
        placeholder="搜索楼盘名称"
        :remote-method="remoteMethod"
        :loading="loading"
        loading-text="正在加载中..."
        @change="onSelectChange"
        @blur="blurCustomize"
    >
        <template #prefix>
            <div class="label">
                <el-icon :size="16">
                    <Search />
                </el-icon>
            </div>
        </template>
        <el-option
            v-for="item in projectNameList"
            :key="item.uid"
            :label="item.title"
            :value="item.uid"
            class="searchBox"
        >
            <div class="optionItem">
                <div>
                    <div>{{ item.title }}</div>
                    <span class="area">{{ area }}</span>
                </div>
                <!-- <span>暂无</span > -->
            </div>
        </el-option>
        <div class="noText">未找到楼盘？请换搜索词或者自定义名称</div>
    </el-select>
</template>

<script lang="ts" setup>
import { ref, watch, defineProps, defineEmits } from 'vue';

const props = defineProps({
    area: {
        type: String,
        default: '',
    },
    searchtName: {
        type: String,
        default: '',
    },
});
const emits = defineEmits(['onBaiduSelect', 'onBlurCustomize']);
const loading = ref(false);
const projectNameList: any = ref([]);
const selectName = ref('');

const remoteMethod = (query: string) => {
    if (query) {
        loading.value = true;
    // eslint-disable-line
        const BMap = window.BMap;
        const map = new BMap.Map('allmap');
        const local: any = new BMap.LocalSearch(map, {
            renderOptions: {
                map: map,
            },
            onSearchComplete: (res: any) => {
                console.log(res);
                projectNameList.value = res ? res.Ir || res.Vr : [];
                loading.value = false;
            },
        });
        const name = `${props.area}${query}`;
        selectName.value = query;
        local.search(name);
    }
};
const onSelectChange = (value: any) => {
    const premiseItem = value ? projectNameList.value.find((item: any) => item.uid === value) : {};
    emits('onBaiduSelect', premiseItem);
};

const blurCustomize = () => {
    emits('onBlurCustomize', selectName.value);
};

watch(
    () => props.area,
    () => {
        projectNameList.value = [];
    }
);
watch(
    () => props.searchtName,
    (searchtName) => {
        selectName.value = searchtName;
    }
);
</script>

<style lang="scss" scoped>
.searchBox {
    height: auto !important;
    line-height: 22px;
    padding: 5px 15px;
    .optionItem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        div {
            font-size: 14px;
            color: #333333;
        }
        span {
            color: #8c8c8c;
            font-size: 12px;
        }
    }
    .area {
        font-size: 12px;
        line-height: 14px;
        color: #8c8c8c;
    }
}
.noText {
    font-size: 14px;
    color: #333333;
    padding: 5px 0 5px 15px;
}
.text {
    font-size: 14px;
    color: #333333;
    padding-left: 15px;
    line-height: 32px;
    cursor: pointer;
}
.creatBtn {
    font-size: 15px;
    color: #e60044;
    line-height: 32px;
    padding-left: 15px;
    cursor: pointer;
}
</style>
